<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            沙箱模式 
                1. 利用闭包 
                2. 函数内直接间接返回一个函数 
                3. 外部函数返回一个对象 对象内书写多个函数
        
            目的:
                用来隔离应用程序 或者 代码   的执行环境 

                这个执行环境就是沙箱  
        
        */

        function outer(){
            let num1 = 666;
            let num2 = 999;
            let str = 'hello world';
            const obj = {
                getFn1:function(){return num1},
                getFn2(){return num2},
                setFn1(val){num1= val},
                setFn2(val){num2=val}
            }

            return obj
        }


       
        
        const res = outer(); //得到第一个箱子 
        console.log(res.getFn1()); // 666
        console.log(res.getFn2()); // 999

        res.setFn1(123);
        res.setFn2(456);
        console.log(res.getFn1());// 123
        console.log(res.getFn2());// 456


        const res1 = outer();//得到第二个箱子 
        console.log(res1.getFn1()); // 666 
        console.log(res1.getFn2()); // 999 

        res1.setFn1(333);
        res1.setFn2(555);
        console.log(res1.getFn1()); // 333
        console.log(res1.getFn2()); // 555


        console.log(res.getFn1());// 123
        console.log(res.getFn2());// 456


        // 两个箱子 将代码 隔离开来 
        // 第一个箱子修改代码  不影响第二个箱子的代码 
    </script>
</body>
</html>